<template>
    <div>
        state2:
        <div>{{ state2 }}</div>
        <van-button @click="changeState2">修改likes(已被markRaw)</van-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw, ref, markRaw } from "vue";

export default defineComponent({
    setup() {
        const state = reactive({ name: "zs" });
        const state_toRaw = toRaw(state);
        console.log(state_toRaw);

        const state1 = ref({ name: "zs" });
        const state1_toRaw = toRaw(state1.value);
        console.log(state1_toRaw);

        let obj2 = { name: "zs", likes: markRaw(["唱歌", "跳舞"]) };
        let state2 = reactive(obj2);
        console.log(state2);

        const changeState2 = () => {
            state2.likes[0] = "跑步";
        };
        return {
            state,
            state2,
            changeState2,
        };
    },
});
</script>

<style scoped></style>
